<script setup lang="ts">
const account = JSON.parse(sessionStorage.getItem("account"))
</script>

<template>
  <div id="account">
    <div class="card">
      <div class="imgBx">
        <img v-if="account" src="@/assets/images/face.jpg" />
        <img v-else src="@/assets/images/none.jpg" />
      </div>
      <div class="content">
        <div class="details">
          <h2 v-if="account">{{ account.username }}<br /><span>Enjoy the Breeze!</span></h2>
          <h2 v-else>NoUser<br /><span>Login in please!</span></h2>
          <div v-if="account" class="data">
            <el-badge is-dot>
              <a href="/account" class="accountInfo">
                <img class="accountIcon" src="@/assets/images/用户.png" /><br /><span>个人信息</span>
              </a>
            </el-badge>
            <a href="listOrders" class="accountInfo">
              <img class="accountIcon" src="@/assets/images/订单.png" /><br /><span>我的订单</span></a
            ><br />
            <a href="logForm" class="accountInfo"
              ><img class="accountIcon" src="@/assets/images/收藏.png" /><br /><span>我的日志</span></a
            ><br />
            <a href="/cart" class="accountInfo">
              <img class="accountIcon" src="@/assets/images/购物车空.png" /><br /><span>我的购物车</span></a
            ><br />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
#account {
  width: 20%;
  margin-top: 100px;
  position: inherit;
  display: inline-block;
  float: right;
}
.accountInfo {
  background: inherit;
  text-align: center;
  color: #3c3c3c;
  font: 16px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53", sans-serif;
}
.accountInfo:hover {
  color: #ff5020;
  cursor: pointer;
}
.accountIcon {
  vertical-align: middle;
  margin-top: 10px;
}
.card {
  margin-left: 20px;
  position: relative;
  width: 300px;
  height: 190px;
  /* height: 450px; */
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.15);
  transition: 0.5s;
}

.card:hover {
  height: 450px;
}

.imgBx {
  position: absolute;
  left: 50%;
  top: -50px;
  transform: translateX(-50%);
  width: 150px;
  height: 150px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transition: 0.5s;
}

.card:hover .imgBx {
  width: 200px;
  height: 200px;
}

.imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card .content {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
}

.card .content .details {
  padding: 20px 25px 60px 25px;
  text-align: center;
  width: 100%;
  transition: 0.5s;
  transform: translateY(150px);
}

.card:hover .content .details {
  transform: translateY(0px);
}

.card .content .details h2 {
  font-size: 1.25em;
  font-weight: 600;
  color: #555;
  line-height: 1.2em;
}

.card .content .details h2 span {
  font-size: 0.75em;
  font-weight: 500;
  opacity: 0.5;
}

.card .content .details .data {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}
.card .content .details .data a {
  font-size: 0.85em;
  font-weight: 400;
  opacity: 0.5;
}
</style>
